<template>
	<view class="phone-container">
		<canvas canvas-id="gAnAWPyrXorvFPPlgRVjPNHfvLnITIZE" id="gAnAWPyrXorvFPPlgRVjPNHfvLnITIZE" class="charts" @touchend="tap"/>
		<button class="button-submit btn-blue" type="primary" @click="addCapacityEvent($event)">变化</button>
	</view>
</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {};
	export default {
	  data() {
	    return {
	      cWidth: 750,
	      cHeight: 500,
	    };
	  },
	  onReady() {
	    //这里的 750 对应 css .charts 的 width
	    this.cWidth = uni.upx2px(750);
	    //这里的 500 对应 css .charts 的 height
	    this.cHeight = uni.upx2px(500);
	    this.getServerData();
	  },
	  methods: {
	    getServerData() {
	      //模拟从服务器获取数据时的延时
	      setTimeout(() => {
	        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
	        let res = {
	            categories: [{"value":0.2,"color":"#1890ff"},{"value":0.8,"color":"#2fc25b"},{"value":1,"color":"#f04864"}],
	            series: [
	              {
	                name: "完成率",
	                data: 0.66
	              }
	            ]
	          };
	        this.drawCharts('gAnAWPyrXorvFPPlgRVjPNHfvLnITIZE', res);
	      }, 500);
	    },
	    drawCharts(id,data){
	      const ctx = uni.createCanvasContext(id, this);
	      uChartsInstance[id] = new uCharts({
	        type: "gauge",
	        context: ctx,
	        width: this.cWidth,
	        height: this.cHeight,
	        categories: data.categories,
	        series: data.series,
	        animation: false,
	        background: "#FFFFFF",
	        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	        padding: undefined,
	        title: {
	          name: "66Km/H",
	          fontSize: 25,
	          color: "#2fc25b",
	          offsetY: 0
	        },
	        subtitle: {
	          name: "实时速度",
	          fontSize: 15,
	          color: "#1890ff",
	          offsetY: 0
	        },
	        extra: {
	          gauge: {
	            type: "progress",
	            width: 20,
	            labelColor: "#666666",
	            startAngle: 0.75,
	            endAngle: 0.25,
	            startNumber: 0,
	            endNumber: 100,
	            labelFormat: "",
	            splitLine: {
	              fixRadius: -10,
	              splitNumber: 10,
	              width: 15,
	              color: "#FFFFFF",
	              childNumber: 5,
	              childWidth: 12
	            },
	            pointer: {
	              width: 24,
	              color: "auto"
	            }
	          }
	        }
	      });
	    },
	    tap(e){
	      uChartsInstance[e.target.id].touchLegend(e);
	      uChartsInstance[e.target.id].showToolTip(e);
	    },
		addCapacityEvent(e){
			uChartsInstance['gAnAWPyrXorvFPPlgRVjPNHfvLnITIZE'].updateData({
				series: [
				  {
				    name: "完成率",
				    data: 0.99
				  }
				]
			});
		}
	  }
	};
</script>

<style scoped>
  .charts{
    width: 750rpx;
    height: 500rpx;
  }
  
  .button-submit{
	  width: 50%;
  }
</style>
